<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>浮动练习</title>

    <style>
        /* 清除浏览器固有属性 */
        * {
            margin: 0;
            padding: 0;
        }

        /* 浮动属性 */
        .leftFloat {
            float: left;
        }

        /* 右浮动 */
        .rightFloat {
            float: right;
        }

        /* 父元素清除浮动 */
        .clearFloat::after {
            content: ' ';
            display: block;
            clear: both;
        }

        .normal {
            /* 头部元素居中 */
            margin: 0 auto;
            width: 960px;
            /* 设置文字水平 垂直居中 */
            text-align: center;
        }

        .logo,.banner1,.banner2{
            line-height: 80px;
            height: 80px;
            background-color: aliceblue;
        }

        .logo {
            width: 200px;
        }
        
        .banner1 {
            width: 540px;
            margin: 0 10px;
        }

        .banner2 {
            width: 200px;
        }

        .menu {
            line-height: 30px;
            margin: 5px 0;
            width: 960px;
            height: 30px;
            background-color: aliceblue;
        }

        .content {
            margin-top: 10px;
        }

        .item1,.item2 {
            width: 368px;
            height: 198px;
            /* 垂直居中 */
            line-height: 198px;
            border: 1px solid black;
            margin-right: 10px;
        }

        .buttom {
            margin-top: 10px;
        }

        .item3,.item4,.item5,.item6 {
            width: 178px;
            height: 198px;
            border: 1px solid black;
            margin-right: 10px;
            line-height: 198px;
        }


        .item7,.item8,.item9 {
            width: 198px;
            height: 128px;
            text-align: center;
            line-height: 128px;
            border: 1px solid black;
        }
        .item8 {
            margin: 10px auto; 
        }
        .foot {
            height: 60px;
            /* 垂直居中 */
            line-height: 60px;
            margin-top: 10px;
            background-color: aliceblue;
            border: 1px solid black; 
        }
    </style>
</head>
<body>

    <header class="normal clearFloat">
        <div class="logo leftFloat">logo</div>
        <div class="banner1 leftFloat">banner1</div>
        <div class="banner2 leftFloat">banner2</div>
        <nav class="menu leftFloat">菜单</nav>
    </header>

    <!-- 内容主体 -->
    <main class="content normal clearFloat">
        <!-- 左侧内容 -->
        <div class="leftContent leftFloat">
            <!-- 上方标签 -->
            <div class="top clearFloat">
                <div class="item1 leftFloat">栏目1</div>
                <div class="item2 leftFloat">栏目2</div>
            </div>
            <!-- 下方标签 -->
            <div class="buttom clearFloat">
                <div class="item3 leftFloat">栏目3</div>
                <div class="item4 leftFloat">栏目4</div>
                <div class="item5 leftFloat">栏目5</div>
                <div class="item6 leftFloat">栏目6</div>
            </div>
        </div>
        <!-- 右侧内容 -->
        <!-- 这里因为就是直接按照行排列的 所以是不需要浮动的 -->
        <div class="rightContent rightFloat">
            <div class="item7">栏目7</div>
            <div class="item8">栏目8</div>
            <div class="item9">栏目9</div>
        </div>
    </main>

    <footer class="foot normal">
         <div class="footContent">Copyright &copy; 2020</div>
    </footer>

   

</body>
</html>